<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Palo Alto Bicycle Club</title>
	

<!--
Filename: routelibrary.php

Primary Author: Tyler Mazaika
Coin 71 Group 1
Palo Alto Bicycle Club - Route Library

Constructs a table of all routes listed in "routelibrary.xml" with options to filter by 
ride category and hilliness.  Clicking on a ride leads to the full text of the ride in
it's original format.

-->

   <!-- BEGIN JQUERY DATATABLE SCRIPTS -->
        <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="jquery/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			var oTable;
			var asInitVals = new Array();

			$(document).ready(function() {
				oTable = $('#routeList').dataTable( {
                    "bPaginate" : false,
                    "bSort" : false,
                    "bFilter" : false,
                    "bStateSave" : true
				} );


                $("thead select").change( function () {
                    /* Filter on the column (the index) of this element */
                    oTable.fnFilter( this.value, $("thead select").index(this)+1 );
                })
			} );
		</script>
   <!-- END JQUERY DATATABLE SCRIPTS -->
          
        <link rel="stylesheet" type="text/css" href="_stylesheets/pabc.css" />
            <link rel="stylesheet" type="text/css" href="datepicker/jquery.datepick.css" />
</head>
<body>

<!-- HEADER -->
	<?php include("header.php") ?>
<!-- end HEADER -->

<!-- WRAPPER -->
<div id="wrapper">

	<!-- LEFT COL -->
	<div class="leftcol">
		<?php include("leftcol.php") ?>
	</div>
	<!-- END LEFT COL -->

	
	<!-- RIGHT COL -->
	<div class="rightcol">
		<!-- ********* MAIN PAGE CONTENT *********** -->
        <div id="routeLibrary">
        
            <h3>Route Library</h3>
            <table cellpadding="0" cellspacing="0" border="0" class="" id="routeList">
                <thead>
                    <tr>
                        <th>Route Name <br />&nbsp;</th>
                        <th>Category <br />
                            <select>
                                <option value="">All</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                                <option value="D">D</option>
                                <option value="E">E</option>
                                <option value="F">F</option>
                            </select></th>
                        <th>Hilliness <br />
                            <select>
                                <option value="">All</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                            </select></th>
                        <th>Mileage <br />&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <?php

                    // creates table based on XML route data

                    $doc = new DOMDocument;
                    $doc->load("routelibrary.xml");

                    $routes = $doc->getElementsByTagName('route');

                    $libArray = array();                        // store the array of routes

                    foreach ( $routes as $route) {
                        $libArray [] = array(                   // store each Route as an associative array in $libArray
                            'title' => $route->getElementsByTagName('title')->item( 0 )->nodeValue,
                            'category' => $route->getElementsByTagName('category')->item( 0 )->nodeValue,
                            'hilliness' => $route->getElementsByTagName('hilliness')->item( 0 )->nodeValue,
                            'mileage' => $route->getElementsByTagName('mileage')->item( 0 )->nodeValue
                        );
                    }
                        
                        // each route is made into a table row.
                    foreach( $libArray as $i => $route ) {
                        echo '<tr><td><a href="routeText.php?rID='.$i.'">'.$route[ 'title' ].'</a></td><td>'.$route[ 'category' ] .'</td><td>'.$route[ 'hilliness' ] .'</td><td>'.$route[ 'mileage' ] .'</td></tr>';
                    }
                    ?>
                </tbody>
            </table>
        </div>

		<!-- ********* END MAIN CONTENT ************ -->
	</div>
    <!-- END RIGHT COLUMN -->

</div>
<!-- end WRAPPER -->

<!-- FOOTER -->
	<?php include("footer.php") ?>
<!-- END FOOTER -->

</body>
</html>